<template>
  <div>
    <p style="font-size: 24px; margin-bottom: 10px">品类分析</p>
    <p style="color: #999; margin-bottom: 20px">
      比较类别的潜力，并选择要添加到分类中的类别
    </p>
    <div style="display: flex; align-items: center">
      <el-cascader
        clearable
        filterable
        v-model="seva"
        placeholder="类别"
        :options="tableData.options"
        @change="handleChange"
        :props="{
          checkStrictly: true,
          value: 'description_category_id',
          label: 'category_name',
          children: 'children',
          leaf: 'type_id', // 将第三级的属性名改为 type_id
        }"
      />
      <el-select
        v-model="tiaojian.dateType"
        placeholder="Select"
        @change="handleChanges"
        style="width: 240px; margin-left: 10px"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>

      <el-button
        @click="getleibiaf"
        style="color: #fff; margin-left: 10px; font-size: 12px"
        type="primary"
        color="rgb(78 168 185)"
        round
        >搜索</el-button
      >
    </div>
    <el-radio-group style="margin: 20px 0" v-model="radio1">
      <el-radio-button label="metric_gmv">订购金额</el-radio-button>
      <el-radio-button label="metric_items">订购件数</el-radio-button>
      <el-radio-button label="metric_aiv">平均价格</el-radio-button>
      <el-radio-button label="metric_sellers">卖家数量</el-radio-button>

      <el-radio-button label="metric_brands">品牌数量</el-radio-button>
    </el-radio-group>
    <!-- <p
      v-show="shuj"
      style="text-align: center; margin-top: 20px; font-size: 18px"
    >
      没有数据
    </p> -->
    <div style="width: 100%; margin-top: 10px">
      <ec
        @bian="bian"
        :radio1="radio1"
        :xuanzhong="xuanzhong"
        :dai="dai"
        :zhedata="zhedata"
      />
    </div>

    <el-table
      :row-key="getRowKeys"
      ref="multipleTableRef"
      :data="dat.table"
      @select="ssdss"
      @select-all="ssdsss"
      @selection-change="handleSelectionChange"
      style="width: 100%; height: 500px; margin-top: 20px"
    >
      <el-table-column type="selection" width="55">
        <template #header> ssss </template>
      </el-table-column>
      <el-table-column label="类别" width="120">
        <template #default="scope">{{ scope.row.label }}</template>
      </el-table-column>
      <el-table-column property="metric_gmv" label="订购金额" width="120">
        <template #default="scope">{{ scope.row.metric_gmv }}</template>
      </el-table-column>
      <el-table-column property="metric_gmv" label="订购金额增长" width="120">
        <template #default="scope">{{ scope.row.metric_gmv_growth }}</template>
      </el-table-column>
      <el-table-column property="metric_gmv" label="平均价格" width="120">
        <template #default="scope">{{ scope.row.metric_aiv }}</template>
      </el-table-column>
      <el-table-column property="metric_gmv" label="平均价格增长" width="120">
        <template #default="scope">{{ scope.row.metric_aiv_growth }}</template>
      </el-table-column>
      <el-table-column property="metric_gmv" label="已订购数量" width="120">
        <template #default="scope">{{ scope.row.metric_items }}</template>
      </el-table-column>
      <el-table-column property="metric_gmv" label="卖家数量" width="120">
        <template #default="scope">{{ scope.row.metric_sellers }}</template>
      </el-table-column>
      <el-table-column property="metric_gmv" label="品牌数量" width="120">
        <template #default="scope">{{ scope.row.metric_brands }}</template>
      </el-table-column>
      <el-table-column property="metric_gmv" label="前五名卖家份额" width="160">
        <template #default="scope">{{
          scope.row.metric_leader_share + "%"
        }}</template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script setup>
import ec from "./components/ca.vue";
import {
  shoudele,
  tezheng,
  shoulist,
  getshu,
  leibiaf,
  getzhe,
  pinpai,
  bina,
  cahngku,
  tesou,
  texiala,
} from "../../api/index";
import {h} from "vue";
import {ElNotification} from "element-plus";
import {ref, nextTick, onMounted, reactive, onUpdated, defineProps} from "vue";
const props1 = {
  checkStrictly: true,
};
const seva = ref([]);
const tableData = reactive({
  attribute: [],
  d: [],
  options: [],
  pinop: [],
  cang: [],
  xiala: [],
});
const tiaojian = reactive({
  type: null,
  categoryId: "",
  dateType: "365",
});
const options = [
  {
    value: "365",
    label: "年",
  },
  {
    value: "90",
    label: "季度",
  },
  {
    value: "28",
    label: "28天",
  },
  {
    value: "7",
    label: "7天",
  },
];
const xuanzhong = ref([]);
const ssdsss = (e) => {
  if (e.length > 10) {
    ElNotification({
      title: "提示",
      message: h("i", {style: "color: red"}, "最多选择10条数据"),
    });
    setTimeout(() => {
      multipleTableRef.value.clearSelection();
      toggleSelection(dat.ssh, false);
      xuanzhong.value = dat.ssh;
    }, 1000);
  } else {
    xuanzhong.value = e;
    let a = [];
    xuanzhong.value.forEach((it) => {
      a.push(it.key);
    });
    getzhes(a.join(","));
  }
};
const ssdss = (e) => {
  dat.ssh = e;
  if (e.length > 10) {
    ElNotification({
      title: "提示",
      message: h("i", {style: "color: red"}, "最多选择10条数据"),
    });
    setTimeout(() => {
      dat.ssh = e.slice(0, e.length - 1);
      multipleTableRef.value.clearSelection();
      toggleSelection(e.slice(0, e.length - 1), false);
      xuanzhong.value = e.slice(0, e.length - 1);
    }, 1000);
  } else {
    xuanzhong.value = e;
    let a = [];
    xuanzhong.value.forEach((it) => {
      a.push(it.key);
    });
    getzhes(a.join(","));
  }
};
const handleSelectionChange = (e) => {
  xuanzhong.value = e;
};
const getshus = async () => {
  const {data} = await getshu();
  tableData.options = data.result;

  // 获取数据后进行预处理，将第三级节点的 type_id 和 type_name 字段都替换为上级的相应字段
  // 获取数据后进行预处理，将第三级节点的 type_id 和 type_name 字段名都替换为上级的相应字段名
  const processedOptions = tableData.options.map((level1) => {
    console.log(level1);
    level1.disabled = true;
    return {
      ...level1,
      children: level1.children.map((level2) => {
        return {
          ...level2,
          children: level2.children.map((level3) => {
            return {
              ...level3,
              description_category_id: level3.type_id, // 将 type_id 字段名替换为 description_category_id
              category_name: level3.type_name, // 将 type_name 字段名替换为 category_name
            };
          }),
        };
      }),
    };
  });

  // 更新 el-cascader 组件的 options 属性为预处理后的数据
  tableData.options = processedOptions;
};
const handleChange = (e) => {
  if (e.length) {
    tiaojian.categoryId = e[e.length - 1];
    if (e.length == 2) tiaojian.type = "category2";
    if (e.length == 3) tiaojian.type = "category3";
  }

  //   getleibiaf();
};
const handleChanges = (e) => {
  //   getleibiaf();
};
const bian = (e) => {
  if (e.length) {
    zhedata.value = e;
  }
};
const zhedata = ref([]);
const dai = ref([]);
const getzhes = (e) => {
  let a = {
    dateType: tiaojian.dateType,
    categoryId: tiaojian.categoryId,
    keys: e,
    dataType: radio1.value,
  };
  getzhe(a).then((res) => {
    if (res.code == 200) {
      zhedata.value = res.data.groupedMetrics;

      dai.value = res.data.groupedMetrics;
    }
  });
};
const shuj = ref(true);
const radio1 = ref("metric_gmv");
const multipleTableRef = ref(null);
const toggleSelection = (rows, fa = true) => {
  let a = [];
  if (rows) {
    rows.forEach((row) => {
      a.push(row.key);
      multipleTableRef.value.toggleRowSelection(row, true);
    });
    if (fa) getzhes(a.join(","));
  }
};

const dat = reactive({table: [], ssh: []});
const getleibiaf = () => {
  shuj.value = false;
  leibiaf(tiaojian).then((result) => {
    dat.table = result.data;
    dat.table = dat.table.splice(0, 30);
    dat.ssh = dat.table.slice(0, 5);
    setTimeout(() => {
      toggleSelection(dat.table.slice(0, 5));
    }, 1000);
  });
};
getshus();
</script>
<style lang="scss" scoped>
:deep(.el-radio-button__original-radio:checked + .el-radio-button__inner) {
  background: rgb(78 168 185) !important;
}

.el-cascader-panel {
  .el-cascader-menu {
    width: 2000px !important;
    .el-radio {
      display: none !important;
    }
  }
}
</style>
